<style type="text/less">
    @import "/web/public/public.less";
    #tab-list.course{
        margin-top: 32px;
        .list_center{
            width: 100%;
            overflow:hidden;
            .tab{
                width:330px;
                display: inline-block;
                float: left;
                .tab_center{
                    border-bottom: 1px solid #eeeeee;
                    li{
                        display: inline-block;
                        width: 115px;
                        text-align: center;
                        font-size: 18px;
                        font-weight: 900;
                        font-stretch: normal;
                        line-height: 40px;
                        letter-spacing: 1px;
                        color: #333333;
                        cursor: pointer;
                        &:hover{
                            color:  #e60012;
                        }
                    }
                    .active{
                        border-left: 1px solid #eeeeee;
                        border-right: 1px solid #eeeeee;
                        border-top: 1px solid #e60012;
                    }
                }
                .list{
                    display: none;
                    .top{
                        display: inline-block;
                        width: 100%;
                        color: #333333;
                        p{
                            font-size: 18px;
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: 54px;
                            letter-spacing: 0px;
                            .ellipsis
                        }
                        &:hover{
                            color: #e60012;
                        }
                    }
                    .link_img{
                        width: 100%;
                        height: 202px;
                        display: inline-block;
                        overflow: hidden;
                        img {
                            transition: all 0.5s;
                            width: 100%;
                            height: 202px;
                            &:hover{
                                transform: scale(1.03)
                            }
                        }
                    }
                    ul{
                        margin-top: 10px;
                        li{
                            .rate{
                                width: 6px;
                                height: 6px;
                                background: #eeeeee;
                                border-radius: 50%;
                                display:inline-block;
                                vertical-align: middle;
                                margin-right: 12px;
                            }
                            h3{
                                display: inline-block;
                            }
                            a{
                                font-size: 14px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 26px;
                                letter-spacing: 0px;
                                color: #333333;
                                vertical-align: middle;
                                display: inline-block;
                                width: 306px;
                                &:hover{
                                    color: #e60012;
                                }
                                .ellipsis
                            }

                        }
                    }
                }
                .active{
                    display: inline-block;
                    width: 100%;
                }
            }
            .tab:nth-child(2){
                margin: 0 17px;
            }
        }
    }
</style>
<#if channelList[0].channelStatus == 1>
    <div id="tab-list" class="course">
        <div class="list_center">
            <div class="tab">
                <ul class="tab_center">
                    <li class="active"><h2><a href="${"${domain}/web/superviseList/1.html?id=${channelList[0].channelValue}&column=${channelList[0].channelName}"}" target="_blank" rel="noopener noreferrer">${channelList[0].channelName}</a></h2></li>
                    <li><h2><a href="${"${domain}/web/superviseList/1.html?id=${channelList[1].channelValue}&column=${channelList[1].channelName}"}" target="_blank" rel="noopener noreferrer">${channelList[1].channelName}</a></h2></li>
                </ul>
                <div class="list_wrap">
                    <div class="list active">
                        <#if channelList[0].channelHeadline == 1>
                            <#if list1?? && list1?size gt 0>
                                <#if list1[0].articleOutLinkStatus == 1>
                                    <h3><a href="${list1[0].articleOutLink}" target="_blank" class="top"><p>${list1[0].articleTitle}</p></a></h3>
                                    <a href="${list1[0].articleOutLink}" target="_blank" class="link_img"><img src="${list1[0].articleTitleImage}" alt="${list1[0].articleTitleImageAlt}" title="${list1[0].articleTitleImageAlt}"></a>
                                <#else>
                                    <h3><a href="${list1[0].articleUrl}" target="_blank" class="top"><p>${list1[0].articleTitle}</p></a></h3>
                                    <a href="${list1[0].articleUrl}" target="_blank" class="link_img"><img src="${list1[0].articleTitleImage}" alt="${list1[0].articleTitleImageAlt}" title="${list1[0].articleTitleImageAlt}"></a>
                                </#if>
                                <ul>
                                    <#if list1?size gt 1>
                                        <#list 1..(list1!?size-1) as i>
                                            <li>
                                                <span class="rate"></span>
                                                <#if list1[i].articleOutLinkStatus == 1>
                                                    <h3><a href="${list1[i].articleOutLink}" target="_blank">${list1[i].articleTitle}</a></h3>
                                                <#else>
                                                    <h3><a href="${list1[i].articleUrl}" target="_blank">${list1[i].articleTitle}</a></h3>
                                                </#if>
                                            </li>
                                        </#list>
                                    </#if>
                                </ul>
                            </#if>
                        <#else>
                            <ul>
                                <#list list1 as info>
                                    <li>
                                        <span class="rate"></span>
                                        <#if info.articleOutLinkStatus == 1>
                                            <h3><a href="${info.articleOutLink}" target="_blank">${info.articleTitle}</a></h3>
                                        <#else>
                                            <h3><a href="${info.articleUrl}" target="_blank">${info.articleTitle}</a></h3>
                                        </#if>
                                    </li>
                                </#list>
                            </ul>
                        </#if>
                    </div>
                    <div class="list">
                        <#if channelList[1].channelHeadline == 1>
                            <#if list2?? && list2?size gt 0>
                                <#if list2[0].articleOutLinkStatus == 1>
                                    <h3><a href="${list2[0].articleOutLink}" target="_blank" class="top"><p>${list2[0].articleTitle}</p></a></h3>
                                    <a href="${list2[0].articleOutLink}" target="_blank" class="link_img"><img src="${list2[0].articleTitleImage}" alt="${list2[0].articleTitleImageAlt}" title="${list1[0].articleTitleImageAlt}"></a>
                                <#else>
                                    <h3><a href="${list2[0].articleUrl}" target="_blank" class="top"><p>${list2[0].articleTitle}</p></a></h3>
                                    <a href="${list2[0].articleUrl}" target="_blank" class="link_img"><img src="${list2[0].articleTitleImage}" alt="${list2[0].articleTitleImageAlt}" title="${list1[0].articleTitleImageAlt}"></a>
                                </#if>
                                <ul>
                                    <#if list2?size gt 1>
                                        <#list 1..(list2!?size-1) as i>
                                            <li>
                                                <span class="rate"></span>
                                                <#if list2[i].articleOutLinkStatus == 1>
                                                    <h3><a href="${list2[i].articleOutLink}" target="_blank">${list2[i].articleTitle}</a></h3>
                                                <#else>
                                                    <h3><a href="${list2[i].articleUrl}" target="_blank">${list2[i].articleTitle}</a></h3>
                                                </#if>
                                            </li>
                                        </#list>
                                    </#if>
                                </ul>
                            </#if>
                        <#else>
                            <ul>
                                <#list list2 as info>
                                    <li>
                                        <span class="rate"></span>
                                        <#if info.articleOutLinkStatus == 1>
                                            <h3><a href="${info.articleOutLink}" target="_blank">${info.articleTitle}</a></h3>
                                        <#else>
                                            <h3><a href="${info.articleUrl}" target="_blank">${info.articleTitle}</a></h3>
                                        </#if>
                                    </li>
                                </#list>
                            </ul>
                        </#if>
                    </div>
                </div>
            </div>
            <div class="tab">
                <ul class="tab_center">
                    <li class="active">
                        <h2><a href="${"${domain}/web/superviseList/1.html?id=${channelList[2].channelValue}&column=${channelList[2].channelName}"}" target="_blank" rel="noopener noreferrer">${channelList[2].channelName}</a></h2>
                    </li>
                    <li>
                        <h2><a href="${"${domain}/web/superviseList/1.html?id=${channelList[3].channelValue}&column=${channelList[3].channelName}"}" target="_blank" rel="noopener noreferrer">${channelList[3].channelName}</a></h2>
                    </li>
                </ul>
                <div class="list_wrap">
                    <div class="list active">
                        <#if channelList[2].channelHeadline == 1>
                            <#if list3?? && list3?size gt 0>
                                <#if list3[0].articleOutLinkStatus == 1>
                                    <h3>
                                        <a href="${list3[0].articleOutLink}" target="_blank" class="top">
                                            <p>${list3[0].articleTitle}</p>
                                        </a>
                                    </h3>
                                    <a href="${list3[0].articleOutLink}" target="_blank" class="link_img">
                                        <img src="${list3[0].articleTitleImage}" alt="${list3[0].articleTitleImageAlt}" title="${list3[0].articleTitleImageAlt}">
                                    </a>
                                <#else>
                                    <h3>
                                        <a href="${list3[0].articleUrl}" target="_blank" class="top">
                                            <p>${list3[0].articleTitle}</p>
                                        </a>
                                    </h3>
                                    <a href="${list3[0].articleUrl}" target="_blank" class="link_img">
                                        <img src="${list3[0].articleTitleImage}" alt="${list3[0].articleTitleImageAlt}" title="${list3[0].articleTitleImageAlt}">
                                    </a>
                                </#if>
                                <ul>
                                    <#if list3?size gt 1>
                                        <#list 1..(list3!?size-1) as i>
                                            <li>
                                                <span class="rate"></span>
                                                <#if list3[i].articleOutLinkStatus == 1>
                                                    <h3><a href="${list3[i].articleOutLink}" target="_blank">${list3[i].articleTitle}</a></h3>
                                                <#else>
                                                    <h3><a href="${list3[i].articleUrl}" target="_blank">${list3[i].articleTitle}</a></h3>
                                                </#if>
                                            </li>
                                        </#list>
                                    </#if>
                                </ul>
                            </#if>
                        <#else>
                            <ul>
                                <#list list3 as info>
                                    <li>
                                        <span class="rate"></span>
                                        <#if info.articleOutLinkStatus == 1>
                                            <h3><a href="${info.articleOutLink}" target="_blank">${info.articleTitle}</a></h3>
                                        <#else>
                                            <h3><a href="${info.articleUrl}" target="_blank">${info.articleTitle}</a></h3>
                                        </#if>
                                    </li>
                                </#list>
                            </ul>
                        </#if>
                    </div>
                    <div class="list">
                        <#if channelList[3].channelHeadline == 1>
                            <#if list4?? && list4?size gt 0>
                                <#if list4[0].articleOutLinkStatus == 1>
                                    <h3>
                                        <a href="${list4[0].articleOutLink}" target="_blank" class="top">
                                            <p>${list4[0].articleTitle}</p>
                                        </a>
                                    </h3>
                                    <a href="${list4[0].articleOutLink}" target="_blank" class="link_img">
                                        <img src="${list4[0].articleTitleImage}" alt="${list4[0].articleTitleImageAlt}" title="${list4[0].articleTitleImageAlt}">
                                    </a>
                                <#else>
                                    <h3>
                                        <a href="${list4[0].articleUrl}" target="_blank" class="top">
                                            <p>${list4[0].articleTitle}</p>
                                        </a>
                                    </h3>
                                    <a href="${list4[0].articleUrl}" target="_blank" class="link_img">
                                        <img src="${list4[0].articleTitleImage}" alt="${list4[0].articleTitleImageAlt}" title="${list4[0].articleTitleImageAlt}">
                                    </a>
                                </#if>
                                <ul>
                                    <#if list4?size gt 1>
                                        <#list 1..(list4!?size-1) as i>
                                            <li>
                                                <span class="rate"></span>
                                                <#if list4[i].articleOutLinkStatus == 1>
                                                    <h3><a href="${list4[i].articleOutLink}" target="_blank">${list4[i].articleTitle}</a></h3>
                                                <#else>
                                                    <h3><a href="${list4[i].articleUrl}" target="_blank">${list4[i].articleTitle}</a></h3>
                                                </#if>
                                            </li>
                                        </#list>
                                    </#if>
                                </ul>
                            </#if>
                        <#else>
                            <ul>
                                <#list list4 as info>
                                    <li>
                                        <span class="rate"></span>
                                        <#if info.articleOutLinkStatus == 1>
                                            <h3><a href="${info.articleOutLink}" target="_blank">${info.articleTitle}</a></h3>
                                        <#else>
                                            <h3><a href="${info.articleUrl}" target="_blank">${info.articleTitle}</a></h3>
                                        </#if>
                                    </li>
                                </#list>
                            </ul>
                        </#if>
                    </div>
                </div>
            </div>
            <div class="tab">
                <ul class="tab_center">
                    <li class="active">
                        <h2><a href="${"${domain}/web/superviseList/1.html?id=${channelList[4].channelValue}&column=${channelList[4].channelName}"}" target="_blank" rel="noopener noreferrer">${channelList[4].channelName}</a></h2>
                    </li>
                </ul>
                <div class="list_wrap">
                    <div class="list active">
                        <#if channelList[4].channelHeadline == 1>
                            <#if list5?? && list5?size gt 0>
                                <#if list5[0].articleOutLinkStatus == 1>
                                    <h3>
                                        <a href="${list5[0].articleOutLink}" target="_blank" class="top">
                                            <p>${list5[0].articleTitle}</p>
                                        </a>
                                    </h3>
                                    <a href="${list5[0].articleOutLink}" target="_blank" class="link_img">
                                        <img src="${list5[0].articleTitleImage}" alt="${list5[0].articleTitleImageAlt}" title="${list5[0].articleTitleImageAlt}">
                                    </a>
                                <#else>
                                    <h3>
                                        <a href="${list5[0].articleUrl}" target="_blank" class="top">
                                            <p>${list5[0].articleTitle}</p>
                                        </a>
                                    </h3>
                                    <a href="${list5[0].articleUrl}" target="_blank" class="link_img">
                                        <img src="${list5[0].articleTitleImage}" alt="${list5[0].articleTitleImageAlt}" title="${list5[0].articleTitleImageAlt}">
                                    </a>
                                </#if>
                                <ul>
                                    <#if list5?size gt 1>
                                        <#list 1..(list5!?size-1) as i>
                                            <li>
                                                <span class="rate"></span>
                                                <#if list5[i].articleOutLinkStatus == 1>
                                                    <h3><a href="${list5[i].articleOutLink}" target="_blank">${list5[i].articleTitle}</a></h3>
                                                <#else>
                                                    <h3><a href="${list5[i].articleUrl}" target="_blank">${list5[i].articleTitle}</a></h3>
                                                </#if>
                                            </li>
                                        </#list>
                                    </#if>
                                </ul>
                            </#if>
                        <#else>
                            <ul>
                                <#list list5 as info>
                                    <li>
                                        <span class="rate"></span>
                                        <#if info.articleOutLinkStatus == 1>
                                            <h3><a href="${info.articleOutLink}" target="_blank">${info.articleTitle}</a></h3>
                                        <#else>
                                            <h3><a href="${info.articleUrl}" target="_blank">${info.articleTitle}</a></h3>
                                        </#if>
                                    </li>
                                </#list>
                            </ul>
                        </#if>
                    </div>
                </div>
            </div>
        </div>
    </div>
</#if>
<script src="/web/lib/less.min.js"></script>
<script>
    $('.tab_center').find('li').hover(function () {
        console.log($(this).index())
        var index = $(this).index()
        $(this).addClass('active')
        $(this).siblings('li').removeClass('active');
        console.log()
        $(this).parents('.tab_center').siblings('.list_wrap').find('.list').eq(index).addClass('active');
        $(this).parents('.tab_center').siblings('.list_wrap').find('.list').eq(index).siblings('.list').removeClass('active');
    })
</script>